<template>
  <div class="cart-container">
    <div class="cart-header">
      <h2>购物车</h2>
      <el-button type="primary" @click="router.push('/')" plain
        >继续购物</el-button
      >
    </div>

    <!-- 购物车列表 -->
    <div class="cart-content" v-if="cartItems.length">
      <el-table :data="cartItems" style="width: 100%">
        <!-- 商品信息列 -->
        <el-table-column label="商品信息" min-width="400">
          <template #default="{ row }">
            <div class="product-info">
              <el-checkbox v-model="row.selected" @change="updateSelection" />
              <img :src="row.image" :alt="row.name" class="product-image" />
              <div class="product-details">
                <div class="product-name">{{ row.name }}</div>
                <div class="product-attrs">
                  <el-tag size="small">{{ row.size }}</el-tag>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>

        <!-- 单价列 -->
        <el-table-column label="单价" width="120">
          <template #default="{ row }">
            <div class="price">¥{{ row.price.toFixed(2) }}</div>
          </template>
        </el-table-column>

        <!-- 数量列 -->
        <el-table-column label="数量" width="150">
          <template #default="{ row }">
            <el-input-number
              v-model="row.quantity"
              :min="1"
              :max="99"
              size="small"
              @change="updateQuantity(row)"
            />
          </template>
        </el-table-column>

        <!-- 小计列 -->
        <el-table-column label="小计" width="120">
          <template #default="{ row }">
            <div class="subtotal">
              ¥{{ (row.price * row.quantity).toFixed(2) }}
            </div>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-button
              type="danger"
              link
              @click="removeItem(row)"
              :icon="Delete"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 购物车底部 -->
      <div class="cart-footer">
        <div class="left-section">
          <el-checkbox v-model="selectAll" @change="toggleSelectAll">
            全选
          </el-checkbox>
          <el-button type="danger" link @click="removeSelected">
            删除选中商品
          </el-button>
        </div>
        <div class="right-section">
          <div class="total-info">
            <span>已选择 {{ selectedCount }} 件商品</span>
            <span class="total-price">
              合计：<em>¥{{ totalPrice.toFixed(2) }}</em>
            </span>
          </div>
          <el-button
            type="danger"
            size="large"
            :disabled="!selectedCount"
            @click="checkout"
          >
            结算
          </el-button>
        </div>
      </div>
    </div>

    <!-- 空购物车 -->
    <el-empty v-else description="购物车是空的">
      <el-button type="primary" @click="router.push('/')"> 去购物 </el-button>
    </el-empty>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete } from "@element-plus/icons-vue";

const router = useRouter();

// 购物车数据
const cartItems = ref([
  {
    id: 1,
    name: "Nike Air Max 270",
    price: 999.0,
    image:
      "https://img2.baidu.com/it/u=1705766420,380501671&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
    size: "42",
    quantity: 1,
    selected: true,
  },
  // 可以添加更多商品
]);

// 全选状态
const selectAll = computed({
  get: () =>
    cartItems.value.length && cartItems.value.every((item) => item.selected),
  set: (value) => cartItems.value.forEach((item) => (item.selected = value)),
});

// 选中商品数量
const selectedCount = computed(
  () => cartItems.value.filter((item) => item.selected).length
);

// 总价
const totalPrice = computed(() =>
  cartItems.value
    .filter((item) => item.selected)
    .reduce((sum, item) => sum + item.price * item.quantity, 0)
);

// 更新商品数量
const updateQuantity = (item) => {
  // TODO: 调用后端 API 更新数量
  ElMessage.success("数量已更新");
};

// 删除商品
const removeItem = (item) => {
  ElMessageBox.confirm("确定要删除这件商品吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    cartItems.value = cartItems.value.filter((i) => i.id !== item.id);
    ElMessage.success("商品已删除");
  });
};

// 删除选中商品
const removeSelected = () => {
  if (!selectedCount.value) {
    ElMessage.warning("请先选择商品");
    return;
  }

  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedCount.value} 件商品吗？`,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(() => {
    cartItems.value = cartItems.value.filter((item) => !item.selected);
    ElMessage.success("选中商品已删除");
  });
};

// 全选/取消全选
const toggleSelectAll = (value) => {
  cartItems.value.forEach((item) => (item.selected = value));
};

// 更新选中状态
const updateSelection = () => {
  // 这里可以添加其他逻辑
};

// 结算
const checkout = () => {
  if (!selectedCount.value) {
    ElMessage.warning("请先选择商品");
    return;
  }
  // TODO: 实现结算逻辑
  router.push("/checkout");
};
</script>

<style scoped>
.cart-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cart-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.product-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.product-details {
  flex: 1;
}

.product-name {
  margin-bottom: 8px;
  font-weight: 500;
}

.product-attrs {
  display: flex;
  gap: 8px;
}

.price,
.subtotal {
  color: var(--el-color-danger);
  font-weight: 500;
}

.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.left-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.right-section {
  display: flex;
  align-items: center;
  gap: 20px;
}

.total-info {
  text-align: right;
}

.total-price {
  margin-left: 20px;
  font-size: 14px;
}

.total-price em {
  font-style: normal;
  color: var(--el-color-danger);
  font-size: 20px;
  font-weight: bold;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .cart-footer {
    flex-direction: column;
    gap: 20px;
  }

  .right-section {
    width: 100%;
    justify-content: space-between;
  }
}
</style> 